<template>
    <div class="box">
        <div v-for="(item,index) in items" :key="index">
            <div class="title-box pa-l-r-20">
                <span v-if="item.isDefault">当前收货地址</span><span v-else>选择新的地址</span>
            </div>
            <div class="info-box pa-l-r-20">
                <div><span>{{item.name}}</span><span>{{item.phone}}</span></div>
                <p>{{item.address}}</p>
                <div class="operating-box pa-l-r-20">
                    <span>
                        <input type="radio" name="defaulAddress" :checked="item.isDefault" :id="item.id">
                        <label :for="item.id">默认地址</label>
                    </span>
                    <div>
                        <p @click="edit(index)"><i><img src="../../assets/images/icon-edit.png"></i><b>编辑</b></p>
                        <p @click="del(index)"><i><img src="../../assets/images/icon-del.png"></i><b>删除</b></p>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn-link" @click="add">
            <img src="../../assets/images/icon-add.png" >新增地址
        </button>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
                items:[
                    {name:'王小明',phone:'15412345678',address:'郑州市中原区国家大学科技园西区1号楼12楼1008室',isDefault:true,id:'a1'},
                    {name:'王小明',phone:'15412345678',address:'郑州市中原区国家大学科技园西区1号楼12楼1008室',isDefault:false,id:'a2'}
                ]
            }
        },
        methods:{
            add(){
                this.$router.push('/address/add')
            },
            //编辑地址
            edit(index){
                window.console.log(index)
                this.$router.push('/address/add')
            },
            //删除地址
            del(index){
                this.$dialog.confirm({
                    message: '确定要删除此地址'
                }).then(() => {
                    // on confirm
                    window.console.log(index)
                }).catch(() => {
                    // on cancel
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    .box{
        background-color: $gray_bg;
    }
    .title-box{
        height: vw(74);
        color: #999;
        font-size: vw(24);
        line-height: vw(74);
    }
    .info-box {
        background-color: #fff;
        >div{
            display: flex;
            justify-content: space-between;
            font-size: vw(32);
            line-height: vw(80);
            &.operating-box{
                height: vw(72);
                line-height: vw(72);
                border-top: 1px solid $gray_bg;
            }
            div{
                display: flex;
            }
            p{
                display: flex;
                align-items: center;
                color: #666;
                font-size: vw(24);
                b{
                    font-weight: normal;
                }
                i{
                    width: vw(28);
                    margin-left: vw(80);
                    margin-right: vw(20);
                }
            }
        }
        >p{
            margin-bottom: vw(30);
            color: #999;
        }
        input{
            display: none;
            &:checked + label{
                color: $green;
                &:before{
                    background: url("../../assets/images/icon-selected.png") transparent;
                    border: 0;
                    background-size: 100% 100%;
                }
            }
        }
        label{
            position: relative;
            padding-left: vw(48);
            font-size: vw(24);
            color: #999;
            &:before{
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                width: vw(28);
                height: vw(28);
                transform: translateY(-50%);
                background: #fff;
                border: 1px solid #999;
            }
        }

    }
    .btn-link {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: vw(20);
        bottom: vw(10);
        width: vw(710);
        height: vw(78);
        color: #fff;
        font-size: vw(32);
        -webkit-border-radius: vw(39);
        -moz-border-radius: vw(39);
        border-radius: vw(39);
        background: $orgGradientBg;
        img{
            display: inline-block;
            width: vw(42);
            margin-right: vw(20);
        }
    }
</style>